<template>
  <div class="header-bar">
    <div class="logo" :title="appConfig.applicationName">
      <div class="icon">
        <img src="@/assets/logo.png" alt="logo" title="logo" />
      </div>
      <span class="app-title">
        <slot name="left">{{ appConfig.applicationName }}</slot>
      </span>
    </div>
    <div class="center">
      <slot name="center"></slot>
    </div>
    <div class="win-func">
      <img
        src="@/assets/svg/decrease.svg"
        alt="最小化"
        title="最小化"
        @click.stop="winFun(0)" />
      <img
        :src="
          winStatus
            ? require('@/assets/svg/minimization.svg')
            : require('@/assets/svg/maximize.svg')
        "
        :alt="winStatus ? '最小化' : '最大化'"
        :title="winStatus ? '最小化' : '最大化'"
        @click.stop="winFun(1)" />
      <img
        src="@/assets/svg/close-win.svg"
        alt="关闭"
        title="关闭"
        @click.stop="winFun(2)" />
    </div>
  </div>
</template>
<script>
import appConfig from '../../../../package.json'
export default {
  name: 'headerBar',
  data() {
    return {
      appConfig,
      winStatus: false
    }
  },
  mounted() {
    this.checkWinStatus()
    // 实时监听窗口大小变化
    window.addEventListener('resize', this.checkWinStatus)
  },
  methods: {
    /**
     * 检测当前窗体大小
     */
    async checkWinStatus() {
      this.winStatus = await this.$ele.ipcRenderer.invoke('check-win-status')
    },
    /**
     * 窗口功能
     */
    winFun(type) {
      const winFun = ['windows-win', 'windows-max', 'windows-close']
      if (type === 1) this.winStatus = !this.winStatus
      this.$emit('winFun', { type, func: winFun[type] })
    }
  }
}
</script>
<style lang="scss" scoped>
.header-bar {
  // position: fixed;
  // left: 0;
  // top: 0;
  // z-index: 99999;
  width: 100%;
  height: 40px;
  padding: 0 0 0 10px;
  background: #24adf3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  -webkit-app-region: drag;
  flex-shrink: 0;
  color: var(--text-color);
  .logo {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    .icon {
      height: 100%;
      img {
        padding: 10px 0;
        height: 100%;
      }
    }
  }
  .win-func {
    display: flex;
    height: 100%;
    img {
      padding: 10px;
      height: 100%;
      cursor: pointer;
      &:hover {
        &:not(:last-child) {
          background: #f3f3f3;
        }
        &:last-child {
          background: #f15151;
        }
      }
    }
  }
}
</style>
